<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab菜单点击切换到对应的内容</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <style>
        /*这个是移动端的布局*/
        .view-details-qhnav {
            display: flex;
            display: -webkit-flex;
            /*for uc weixin */
            display: -webkit-box;
            width: 100%;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            -webkit-box-pack: justify;
            -moz-box-pack: justify;
            box-pack: justify;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            border-bottom: 1px solid #dadada;
            background-color: #fff;
        }

        .qhnav-current {
            color: #51b308;
        }

        /*这个选中tab的下划线的效果*/
        .qhnav-current:after {
            content: "";
            position: absolute;
            left: 0.25rem;
            bottom: -0.25rem;
            height: 2px;
            width: 90%;
            background-color: #51b308;
        }

        .switchnav-conntent {
            display: none;
        }

        .switchnav-wrapper .switchnav-conntent:first-child {
            display: block;
        }
    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#switchnav li').click(function (event) {
//获取点击的当前的li的索引值
                var indexnav = $(this).index();
//让当前点击的li标签处于选中状态，其兄弟元素移除选中状态
                $(this).addClass('qhnav-current').siblings('li').removeClass('qhnav-current');
//让内容区域的中相等的索引值的区域显示，其他的兄弟元素隐藏
                $('.switchnav-wrapper .switchnav-conntent').eq(indexnav)
                    .show().siblings('.switchnav-conntent').hide();
            });
        });
    </script>
</head>
<body>
<nav>
    <ul class="view-details-qhnav" id="switchnav">
        <li class="qhnav-current">旅游攻略</li>
        <li>游记</li>
        <li>旅游趣事</li>
    </ul>
</nav>
<div class="switchnav-wrapper">
    <div class="switchnav-conntent">我是旅游攻略的内容</div>
    <div class="switchnav-conntent">我是游记内容</div>
    <div class="switchnav-conntent">我是旅游趣事的内容</div>
</div>

</body>
</html>